import React, { Component} from 'react';
import { NavBar, Space } from 'antd-mobile'
import url from '../../assets/imgs/1.png'
import {withRouter} from 'react-router-dom'

const right = (
    <div style={{ fontSize: 24 }}>
        <Space style={{ '--gap': '16px' }}>
            <i className='iconfont  icon-gengduo' style={{ fontSize: 24 }}></i> |
            <i className='iconfont icon-jieshu' style={{ fontSize: 24 }}></i>
        </Space>
    </div>
)

const logoLeft = (
    <img style={{height:'45px'}} src={url} alt="" />
)
const homeIconLeft = (
    <i className='iconfont icon-shouye-shouye' style={{fontSize:24}}></i>
)
class header extends Component {

    constructor(props){
        super(props);
        this.backFn=this.backFn.bind(this)
    };
    backFn(){
       this.props.history.go(-1)
    }
    getLeftFn = () => {
        // ==='homeIconLeft'?homeIconLeft:(this.props.left==='logoLeft'?logoLeft:null)
        let com;
        switch (this.props.left) {
            case 'homeIconLeft':
                com = homeIconLeft
                break;
        
            case 'logoLeft':
                com = logoLeft
                break;
        
            default:
                com = null
                break;
        }
        return com
    }
    render() {
        return (
            <div className='header'>
                {/* <NavBar right={right} onBack={backFn} left={homeIconLeft}> */}
                <NavBar children={this.props.title} back={this.props.back} right={right} onBack={this.backFn} left={this.getLeftFn()} />
                {/* <NavBar children={this.props.title} back={this.props.back} right={right} onBack={backFn} left={this.props.left==='homeIconLeft'?homeIconLeft:(this.props.left==='logoLeft'?logoLeft:null)} /> */}
            </div>
        );
    }
}

export default withRouter(header);